<template>
	<view class="space_detail bgDefault">
		
		
		<tn-nav-bar fixed alpha customBack class="detail_nav">
		  <view slot="back" class='custom-left' @click="goBack">
		    <text class='tn-icon tn-icon-left icons'></text>
		    <text class='desc'>导师详情</text>
		  </view>
		  
		  <view slot="right" class='tn-custom-nav-bar__right' style="z-index: 99;" >
		    <text @tap="collectSpace" class='tn-icon tn-icon-like' :class="detail.favor?'tn-icon-like-fill colorFill':''" style="margin-right: 18rpx;"></text>
			<button class="share_btn" open-type="share" ><i class="tn-icon tn-icon-send"></i></button>
		  </view>
		</tn-nav-bar>
		
		<view >
			<tn-swiper :height="swiperHeight" imageMode="aspectFit" :list="list"  ></tn-swiper>
		</view>
		
		<view class="space_title tn-radius10">
			<view class="title">{{detail.nickname}}</view>
			<view class="tap"></view>
		</view>
		
		<view class="fujin tn-radius10">
			
			<view class="title">
				<span>资质证明</span>
			</view>
			<view> 客户资质</view>
			
			<view class="map">
				<tn-scroll-list :indicator="false">
				  <view class="tn-flex" style="margin-top: 15rpx;width: 100%;">
				    <block v-for="(item, index) in zzList" :key="index">
				      <view class="house_image ">
						  <image class="tn-radius10" :src="item" mode="aspectFill"></image>
					  </view>
				    </block>
				  </view>
				</tn-scroll-list>
				<view class="empty__item" v-if="zzList.length < 1 && !loading" >
				  <tn-empty mode="data" text="暂未提交资质" :textSize="20" :iconSize="42"></tn-empty>
				</view>
				
			</view>
			
			<view> 体验官评价</view>
			
			<view class="map">
				<tn-scroll-list :indicator="false">
				  <view class="tn-flex" style="margin-top: 15rpx;width: 100%;">
				    <block v-for="(item, index) in commentImages" :key="index" @tap="commentMore">
				      <view class="house_image ">
						  <image class="tn-radius10" :src="item" mode="aspectFill"></image>
					  </view>
				    </block>
				  </view>
				</tn-scroll-list>
				
				<view class="empty__item" v-if="commentImages.length < 1 && !loading" >
				  <tn-empty mode="comment" text="暂无相关评论" :textSize="20" :iconSize="42"></tn-empty>
				</view>
			</view>
		</view>
		
		<view class="fujin tn-radius10">
			
			<view class="title">
				<span>主理人品牌全览</span>
			</view>
			
			<view class="content">
				<zero-markdown-view :markdown="detail.content"></zero-markdown-view>
			</view>
		</view>
		
		<TemplateLoading :active="loading"></TemplateLoading>
		<view style="margin-top: 140rpx;height: 1rpx;width: 100%;"></view>
		
		<tn-popup v-model="show" :borderRadius="20" :customStyle="customStyle" mode="bottom" height="1038rpx">
		      <view style="padding: 29rpx 7%;">
					<view class="tn-flex tn-flex-row-between tn-flex-col-center ">
					  <view class="justify-content-item">
					    <view class="tn-flex tn-flex-col-center tn-flex-row-left" @tap="turnUrl">
					      <!-- 图标logo -->
					      <view class="logo-pic tn-shadow" >
					        <view class="logo-image">
					          <view class="tn-shadow-blur" :style="{ backgroundImage: 'url(' + selectMentor.user.avatar + ');width: 100%;height: 100%;background-size: cover;' }" >
					          </view>
					        </view>
					      </view>
					      <view class="tn-padding-right tn-color-white">
					        <view class="tn-padding-right tn-padding-left-sm select_nickname">
					          {{selectMentor.nickname}}
					        </view>
					        <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis idline select_intro">
								{{selectMentor.intro}}
							</view>
							
							<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis idline tn-flex select_tag">
								<view class="rightTxt">
									<image class="rightImage" src="https://www.zztengma.com/lihu/bumang/images/menuRight.png"></image> 爽约包退
								</view>
								<view class="rightTxt">
									<image class="rightImage" src="https://www.zztengma.com/lihu/bumang/images/menuRight.png"></image> 实名认证
								</view>
								<view v-if="selectMentor.file" class="rightTxt">
									<image class="rightImage" src="https://www.zztengma.com/lihu/bumang/images/menuRight.png"></image> 资质证书
								</view>
							</view>
					      </view>
					      
					    </view>
					  </view>
					</view>
					
					<view class="pop_content">
						<view class="pop_content_user">
							<view class=" tn-flex " style="justify-content: space-between;">
								<image class="alogo"  mode="aspectFit" :src="selectMentor.user.avatar"></image>
								<view class="alogoRight">
									<view class="tn-flex " style="justify-content: space-between;">
										<view class="sprice">￥{{selectMentor.topics[selectTag].price}}</view>
										<view @tap="detail(selectMentor)">主理人详情 > </view>
									</view>
									<view class="">
										<span style="text-decoration-line: line-through;margin-right: ;">原价：￥{{selectMentor.topics[selectTag].price}}</span>
										<span class="">现价：￥{{selectMentor.topics[selectTag].price}}</span>
									</view>
									
									<view class="" style="font-size: 12px;" >已选：{{selectMentor.topics[selectTag].name}} | {{selectMentor.topics[selectTag].times}}分钟</view>
								</view>
							</view>
						</view>
						
						<view class="pop_content_topic">
							<tn-tag 
							backgroundColor="#e2e0e0"
							margin="0 26rpx 0 0"
							:fontColor="index==selectTag ? '#ff6708' :'#666'"
							:border="index==selectTag ? '1px solid #ff6708' :''"
							 v-for="(item,index) in selectMentor.topics" shape="circle"
							@tap="selectTopic(item,index)"
							>{{item.name}}</tn-tag>
						</view>
						
						<view class="buy tn-flex "  style="justify-content: space-between;margin-top: 31rpx;">
							<view style="font-size: 28rpx;line-height: 40px;">购买数量</view>
							<view>
								<changeNumber @forceNumber="forceNumber"></changeNumber>
							</view>
						</view>
						<view>
							<view>选择服务时间 <span style="color: #333;font-size: 12px;">({{order_date}})</span></view>
							<view>
								<long-date 
								    type="day" 
								    :openStatus="true" 
								    @select="getTime">
								</long-date>
							</view>
						</view>
					</view>
					
					<view class="afooter tn-flex" style="justify-content: space-between;">
						<view>
							合计：<span class="sprice">￥{{total.toFixed(2)}}</span>
						</view>
						<view>
							<view class="btn" @tap="subOrder">确认下单</view>
						</view>
					</view>
				</view>
		</tn-popup>
		
		
		<view class="footer tn-flex">
			<view class="price">￥{{detail.price}}</view>
			<view class="order-btn tn-radius10" @tap="turnOrder">立即预约</view>
		</view>
	</view>
</template>

<script>
	import {detailObj, getNearMentor} from '@/api/mentor/index.js'
	import TemplateLoading from '../components/loading.vue'
	import {checkLogin} from '@/util/common.js'
	import changeNumber from '@/components/change-number/change-number.vue';
	import {mentorOrder} from '@/api/order/order.js'
	import {subComment} from '@/api/user/index.js'
	import store from '@/store/index.js'
	
	export default {
		components:{TemplateLoading,changeNumber},
		data() {
			return {
				swiperHeight:"750",
				list:[],
				zzList:[],
				commentImages:[],
				detail:{},
				selectIndex:0,
				selectMentor:{},
				id:0,
				price:0,
				loading:false,
				show:false,
				selectTag:0,
				order_number:1,
				total:0,
				order_date:"请选择时间",
				customStyle:{},
				selectParam:{
					lat:'',
					lng:'',
					id:''
				},
				nearList:[]
			}
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id
				this.initData()
				
				this.getNearSpace()
			}
			
			if(e.pid){
				uni.setStorageSync("pid", e.pid)
			}
		},
		onShareAppMessage() {
			
			var pid = 0;
			var userInfo = store.state?.vuex_user
			if(userInfo.token){
				pid = userInfo.token.split("-")[0]
			}
			
			return {
				title:this.detail.nickname || "布芒的家",
				path:"/pages/mentor/detail?id="+this.id+"&pid="+pid,
				imageUrl:this.detail.user.avatar
			}
		},
		methods: {
			commentMore() {
				uni.navigateTo({
					url: '/pages/space/comment?id=' + this.detail.id + '&type=0'
				})
			},
			mentorDetail(item){
				uni.navigateTo({
				  url: '/pages/mentor/detail?id='+item.id
				})
			},
			rateText(rate){
				if(rate > 4.5) return "超预期";
				if(rate > 3.5) return "非常好";
				if(rate > 2) return "一般般";
				return "体验很差";
			},
			goBack(){
				// 返回上一页
				uni.navigateBack({
				    delta: 1
				});
			},
			collectSpace(){
				if(checkLogin()){
					subComment({
						type:1,
						id:this.detail.id
					}).then(res=>{
						uni.showToast({
							icon:"none",
							title:(this.detail.favor == 1?'取消':'收藏') +'成功'
						})
						
						this.detail.favor = this.detail.favor == 1 ?0 : 1
					})
				}
			},
			shareSpace(){
				console.log("##############")
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: this.detail.title || "布芒的家",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			initData(){
				this.loading = true
				detailObj({id:this.id}).then(res=>{
					this.loading = false
					this.detail = res
					
					this.list.push({
						image:res.user.avatar,
						name:""
					})
					
					this.zzList = res.file ? res.file.split(",") : [],
					this.commentImages = res.commentImages
					
					//this.price = res.children.length > 0 ? res.children[0].price : res.price
				},err=>{
					this.loading = false
				})
			},
			selectHouse(item,index){
				this.selectIndex = index
				this.price = item.price
			},
			trunMap(){
				uni.navigateTo({
				  url: '/pages/space/map'
				})
			},
			turnOrder(){
				if(checkLogin()){
					this.selectMentor = this.detail
					this.show = true
					this.selectTag = 0
					this.order_number = 1
					
					this.initPrice()
				}
			},
			subOrder(){
				if(this.order_date == "请选择时间" || this.order_date == ""){
					uni.showToast({
						icon:'none',
						title:"请选择服务时间"
					})
					
					return false;
				}
				
				var param = {
					mentor_id:this.selectMentor.id,
					mentor_topic_id:this.selectMentor.topics[this.selectTag].id,
					order_number:this.order_number,
					order_date:this.order_date,
					coupon_id:0
				}
				
				this.loading = true
				mentorOrder(param).then(res=>{
					this.loading = false
					uni.navigateTo({
					  url: '/pages/order/pay/pay?order_sn='+res.order_sn
					})
				}, err=>{
					this.loading = false
				})
			},
			getTime(val){
				console.log(val)
				this.order_date = val.time 
			},
			initPrice(){
				var price = this.selectMentor.topics[this.selectTag].price
				this.total = price * this.order_number
			},
			forceNumber(num){
				this.order_number = num
				
				this.initPrice()
			},
			selectTopic(item,index){
				this.selectTag = index
				this.initPrice()
			},
			subBtn(){
				this.selectMentor = mentor
				this.show = true
				this.selectTag = 0
				this.order_number = 1
				
				this.initPrice()
			},
			
			getNearSpace(){
				var _t = this
				uni.getLocation({
					success: function (res) {
						_t.selectParam.lat = res.latitude
						_t.selectParam.lng = res.longitude
						_t.selectData()
					},
					fail(err) {
						console.log(err)
						_t.selectData()
					},
				});
				
			},
			selectData(){
				this.selectParam.id = this.id
				getNearMentor(this.selectParam).then(res=>{
					this.nearList = res
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
  .bgDefault{
	  background: $tn-main-bg;
	  height: 100vh;
	 .index_content{
		 padding: 0 7%;
	 }
  }
  
  .detail_nav{
	  color: #fff;
	  color: #fff;
	  font-size: 42rpx;
	  .custom-left{
		  padding-left: 18rpx;
		  width: 231rpx;
		  background: rgba(0, 0, 0, 0.6);
		  border-top-right-radius: 20%;
		  border-bottom-right-radius: 20%;
		  .icons{
			  display: inline;
			  font-size: 27rpx;
		  }
		  .desc{
			  line-height: 32px;
			  margin-left: 34rpx;
		  	padding: 0 18rpx;
		  	border-left: 1px solid #999999;
		  	text-align: center;
		  	font-size: 24rpx;
		  }
	  }
	
  }
  
  
  .tn-radius10{border-radius: 10rpx;}
  
  .space_title{
	  height: 129rpx;
	  background: #fff;
	  width:100%;
	  padding: 30rpx 52rpx;
	  
	  .title{font-weight: bold;font-size: 25rpx;color: #333;}
	  .tap{
		  background: url("https://www.zztengma.com/lihu/bumang/images/mentor_lable.jpg") no-repeat  ;
		  background-position: left bottom; 
		  height: 31rpx;
		  background-size: contain;
		  margin-top: 20rpx;
	  }
	  .info{
		  margin-top: 15rpx;
		  
		  .comments{
			  padding: 15rpx 7rpx;
			  background: #ffc19d;
			  height: 140rpx;
			  width: 29%;
			  .icons{
				  color: #ff0000;
				  display: inline;
			  }
			  
			  .title{
				  display: flex;
				  justify-content: space-between;
				  line-height: 23rpx;
				  font-size: 21rpx;
				  font-weight: bold;
				  color: #000;
				  span{
					  font-size: 15rpx;
					  color: #666;
				  }
			  }
			  
			  .content{
				  margin-top: 10rpx;
				  font-size: 18rpx;
			  }
		  }
		  
		  .address{
			  color: #333;
			  position: relative;
			  padding: 15rpx 7rpx;
			  font-size: 22rpx;
			  background: #ffc19d;
			  height: 140rpx;
			  width: 68%;
			  .icons{
				  color: #ff6708;
				  font-size: 32rpx;
				  display: block;
				  margin-bottom: 7rpx;
			  }
			  
			  .map{
				  color: #ff6708;
				  position: absolute;
				  bottom: 29rpx;
				  right: 37rpx;
				  font-size: 12rpx;
				  font-weight: bold;
				  text-align: center;
			  }
		  }
	  }
  }
  
  .house{
  		margin-top: 19rpx;
  		background: #fff;
		width:100%;
		padding: 30rpx 52rpx;
		height: 336rpx;
		
		.title{
			font-weight: bold;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			padding-bottom: 24rpx;
			border-bottom: 1px solid #d6d6d6;
		}
		
		.map{
			margin-top: 21rpx;
			.tips{
				font-size: 18rpx;
			}
		}
  }
  
  .house_image{
	  min-width: 282rpx;
	  width: 40%;
	  height: 176rpx;
	  margin-right: 15rpx;
	  
	  image{width: 100%;height: 100%;}
	  .active{border: 1rpx solid $tn-main-orange;}
  }
  
  .fujin{
	margin-top: 19rpx;
	background: #fff;
	width:100%;
	padding: 30rpx 52rpx;
	overflow: hidden;
	
	.title{
		font-weight: bold;
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
		padding-bottom: 24rpx;
		
		.more{
			color: #666;
			font-size: 18rpx;
		}
	}
  }
  
  .comment {
  		margin-top: 19rpx;
  		background: #fff;
  		width: 100%;
  		padding: 30rpx 52rpx;
  		overflow: hidden;
  
  		.title {
  			font-weight: bold;
  			font-size: 14px;
  			display: flex;
  			justify-content: space-between;
			padding-bottom: 23rpx;
			border-bottom: 1px solid #d6d6d6;
  			
  		}
  
  		.tips {
  			line-height: 52rpx;
  			font-size: 12px;
  			color: #666;
  
  			.tj {
  				color: $tn-main-orange;
  				margin-right: 29rpx;
  				font-size: 13px;
  			}
  		}
  
  		.number {
  			.star {
  				color: #ff0000;
  				display: inline;
  				font-size: 36rpx;
  				margin-right: 24rpx;
  			}
  
  			span {
  				line-height: 72rpx;
  				font-size: 24rpx;
  
  				.starNumber {
  					font-size: 36rpx;
  				}
  			}
  		}
  
  		.user_comment {
  			margin-bottom: 12px;
  
  			.userInfo {
  				.logo {
  					width: 36px;
  					height: 36px;
  					float: left;
  					border-radius: 50%;
  					margin-right: 17rpx;
  				}
  
  				.info {
  					.nickname {
  						font-size: 14px;
  						color: #333;
  						line-height: 23px;
  					}
  
  					.desc {
  						font-size: 12px;
  						color: #666;
  
  						.star {
  							color: #ff0000;
  							display: inline;
  							font-size: 12px;
  							margin-left: 5rpx;
  							margin-right: 5rpx;
  						}
  
  						.tag {
  							background-color: $tn-main-orange;
  							color: #fff;
  							padding: 1rpx 8rpx;
  							font-size: 12px;
  						}
  					}
  				}
  			}
  
  		}
  
  		.content {
  			font-size: 12px;
  			margin-top: 6px;
  			color: #666;
  			line-height: 18px;
  		}
  	}
  
  .footer{
	  padding: 18rpx 55rpx 26rpx;font-size: 36rpx;bottom: 0;width: 100%;
	  display: flex;
	  position: fixed;
	  background: #fff;
	  justify-content: space-between;
	  color: $tn-main-orange;
	  .order-btn{
		  color: #fff;
		  font-size: 32rpx;
		  background: $tn-main-orange;
		  padding: 8rpx 12rpx;
	  }
  }
  
  /* 用户头像 start */
  .logo-image{
    width: 116rpx;
    height: 116rpx;
    position: relative;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%;
    overflow: hidden;
    background-color: #FFFFFF;
  }
  
  .rightImage{width: 32rpx;height: 20rpx;margin-right: 5rpx}
  
  .pop_content{
  	  background: #fff;border-top-right-radius: 10px;border-top-left-radius: 10px;margin-top: 18rpx;
  	  padding: 23rpx 30rpx;
  	  .pop_content_user{
  		  display: flex;
  		  justify-content: space-between;
  		  padding-bottom: 30rpx;
  		   border-bottom: 1px solid #c0c0c0;
  		  .alogo{width: 158rpx;height: 158rpx;border-radius:10px;  border:1px solid  $tn-main-orange;margin-right: 30rpx;}
  		  .alogoRight{width: 380rpx;font-size: 10px;color: #666;line-height: 23px;}
  	  }
  	}
  	.select_nickname{font-size: 14px;color: #333;}
  	.select_intro{font-size: 12px;color: #666}
  	.select_tag{
  		font-size: 10px;color: #666;line-height: 20rpx;
  		.rightTxt{
  			margin-right: 10rpx;
  			display: flex;
  			align-content: center;
  		}}
  		
  	.sprice{color: $tn-main-orange;font-size: 36rpx;font-weight: bold;}
  	.afooter{
  		background: #fff;
  		padding: 20rpx;
  		color: #787777;font-size: 24rpx;
  		.btn{
  			background-color: $tn-main-orange;
  			color: #fff;
  			font-size: 36rpx;
  			padding: 10rpx 20rpx;
  			border-radius: 10px;
  		}
  	}
  	
  	.pop_content_topic{
  		margin-top: 32rpx;
  		.tn-tag-class{margin-right: 26rpx;}
  		.tagSelected{border: 1px solid  $tn-main-orange;color:  $tn-main-orange;}
  	}
	
.colorFill{color: $tn-main-orange;}
  .share_btn{    background: none;
    line-height: 15px;
	font-size: 21px;
    padding: 0!important 3rpx 3rpx;
    display: inline-block;
	position: sticky;
	color: #FFFFFF;
}
</style>
